<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>商品分类
        </b>
        <div class="u-right u-5mt">
          <el-button type="success" size="small" icon="el-icon-document-checked" @click="submitForm('objForm')">提交保存
          </el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-form-item label="父级权限" v-if="objForm.parent_id && false">
          <el-cascader expand-trigger="hover" :options="levelTree" @change="handleLevelSelect" placeholder="请选择父级"
            clearable change-on-select :props="levelProps" v-model="level_ids" class="u-w-block"></el-cascader>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input type="text" v-model="objForm.name"></el-input>
        </el-form-item>

        <el-form-item label="是否趣豆商城">
          <el-switch
            v-model="objForm.special"
            active-color="#13ce66"
            :active-value="1"
            inactive-color="#666"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="objForm.status" active-color="#13ce66" :active-value="0" inactive-color="#666"
            :inactive-value="1"></el-switch>
        </el-form-item>
        <el-form-item label="价格上调比例">
          <el-col :span="11">
            <el-input v-model="objForm.go_up" placeholder="比例">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          <el-col class="line" :span="1"></el-col>
          <el-col :span="11">
          </el-col>
        </el-form-item>

        <el-form-item label="图片">
          <el-col :span="11">
            <upload file-folder="goods_type" :file-arr="fileList" list-type="picture-card" :limit="1"
              accept="image/jpeg, image/png" tips="只能上传jpg/png文件，且不超过4MB" @getUploadFiles="getUploadFiles"></upload>
          </el-col>
          <el-col class="line" :span="1"></el-col>
          <el-col :span="11">
          </el-col>
        </el-form-item>
        <el-form-item label="排序">
          <el-col :span="11">
            <el-input v-model="objForm.sort" placeholder="排序"></el-input>
          </el-col>
          <el-col class="line" :span="1"></el-col>
          <el-col :span="11">
            <el-button class="button-new-tag" size="small">数值越大权重越高</el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import Upload from "@/components/upload/upload";
export default {
  mixins: [commonEdit],
  components: {
    Upload
  },
  data() {
    return {
      apiName: "goodsType",
      backRoute: "goodsTypeIndex",
      fileList: [], //临时相册
      levelTree: [],
      level_ids: [],
      levelProps: {
        label: "name",
        value: "id",
        children: "children",
      },
      objForm: {
        id: "",
        name: "",
        special: 0,//是否是敏感
        status: 0,
        sort: 0,
        img: "",
        go_up: 20,
        parent_id: 0,
      },
    };
  },
  methods: {
    afterGetInfo() {
      this.level_ids = this.objForm.parent_id;
      if (this.objForm.img) {
        this.fileList = [
          {
            name: "goods_type",
            url: this.objForm.img,
          },
        ];
      }
    },
    getLevelTree() {
      this.$api.goodsType.tree().then((response) => {
        if (response.code == 1) {
          this.levelTree = response.data.treeData;
        }
      });
    },
    handleLevelSelect(val) {
      if (!(val == null || val == undefined)) {
        this.objForm.parent_id = val[val.length - 1];
      }
    },
    getUploadFiles(files) {
      this.fileList = files;
      this.objForm.img = files[0]["url"];
    },
  },
  created() {
    if (this.$route.params.pid) {
      this.objForm.parent_id = this.$route.params.pid;
      this.level_ids = this.objForm.parent_id;
    }
    this.getLevelTree();
  },
};
</script>
